<template>
  <div class="callCustomerService call-channel-config">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="one.name"
                   :name="one.value"
                   v-for="(one,index) in menu" :key="index"></el-tab-pane>
      <keep-alive>
        <component :is="activeName"
                   class="content"
                   :callConfigFlag="getCallConfigFlag"
                   :triggerClick="triggerClick"
                ></component>
      </keep-alive>
    </el-tabs>
  </div>
</template>
<script>
  import CallLabel from './callLabel.vue'
  import Description from './description.vue'
  import ServiceNoManage from './serviceNoManage.vue'
  import schedule from './schedule.vue'
  import ProcessList from './ProcessList.vue'
  // import queueSurveySelect from './queueSurveySelect.vue'
  import queueSurveySelect from './satisfactionSurvey.vue'
  import otherConfig from './otherConfig.vue'
  import serverLabel from './serverLabel.vue'
  import realTimeTransliterate from './realTimeTransliterate.vue'
  import CallAudioLibrary from './CallAudioLibrary.vue'
  import BlackRedList from './BlackRedList.vue'
  import phoneBook from './phoneBook.vue'
  import { isHasMenu } from '@/utils/m7Utils'
  export default {
    name: 'callCustomerService',
    data () {
      return {
        activeName: 'Description',
        menu: [{name: this.$t('channelsettings.CustomerServiceDescription'), value: 'Description'}],
        oldMenu: [
          {name: this.$t('channelsettings.CustomerServiceDescription'), value: 'Description'},
          {name: this.$t('channelsettings.ServiceNumber'), value: 'serviceNoManage', id: 'service_number_manage'},
          {name: this.$t('channelsettings.schedule'), value: 'schedule', id: 'schedule_config'},
          {name: this.$t('channelsettings.Process'), value: 'ProcessList', id: 'process_manage'},
          {name: this.$t('channelsettings.Voicelibrary'), value: 'CallAudioLibrary', id: 'speech_library'},
          {name: this.$t('channelsettings.RedBlacklist'), value: 'BlackRedList', id: 'black_red_list'},
          {name: this.$t('channelsettings.CallLabel'), value: 'CallLabel', id: 'call_config_label'},
          {name: this.$t('channelsettings.QualityOfServiceLabel'), value: 'serverLabel', id: 'service_quality_label'},
          {name: this.$t('channelsettings.SatisfactionSurveyOption'), value: 'queueSurveySelect',id:'call_satisfaction_config'},
          {name: this.$t('configTabTitle.phoneBook'), value: 'phoneBook'},
          {name: this.$t('channelsettings.realTimeTransliterate'), value: 'realTimeTransliterate', id: 'call_translation_config'},
          {name: this.$t('configTabTitle.otherConfig'), value: 'otherConfig', id: 'other_config'}
        ]
      }
    },
    props: {
      triggerClick: {type: Number, default: 0}
    },
    components: {
      CallLabel,
      Description,
      ServiceNoManage,
      ProcessList,
      schedule,
      queueSurveySelect,
      serverLabel,
      realTimeTransliterate,
      CallAudioLibrary,
      BlackRedList,
      otherConfig,
      phoneBook
    },
    methods: {
      dealMenu () {
        this.activeName = this.menu[0].value
      }
    },
    computed: {
      getCallConfigFlag () {
        let localFlag = window.sessionStorage.getItem('ucenterLoginFlag') || 'no'
        if (this.$store.state.session.user.type === 'admin' || this.$store.state.isNormalCallConfig || localFlag === 'yes' || this.$store.state.oemObj.oemFlag) { // 超管或者是输入账号密码自己配置
          this.menu = this.oldMenu.filter(item => {
            return !item.id || (item.id && isHasMenu(item.id, this.$store.state.session.user))
          })
        } else {
          this.menu = [
            {name: this.$t('channelsettings.CustomerServiceDescription'), value: 'Description'},
            {name: this.$t('channelsettings.CallLabel'), value: 'CallLabel', id: 'call_config_label'},
            {name: this.$t('channelsettings.QualityOfServiceLabel'), value: 'serverLabel', id: 'service_quality_label'},
            {name: this.$t('channelsettings.SatisfactionSurveyOption'), value: 'queueSurveySelect',id:'call_satisfaction_config'},
            {name: this.$t('configTabTitle.phoneBook'), value: 'phoneBook'}
          ]
        }
        return this.$store.state.isNormalCallConfig
      }
    },
    beforeMount () {
      this.dealMenu()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
</style>
